<template>
  <div class="orderConfirmed_wrap">
    <headTop :headClass="'white_header'">
      Order details
    </headTop>
    <div class="scroll_wrap">
       <div class="total_box">
        <div class="to_left">
          <h4>{{amount}}</h4>
          <span>Hang up amount ( CNY )</span>
        </div>
        <div class="to_right">
          <div class="img_box">
            <img :src="img" alt="Head portrait">
          </div>
          <span>{{nick}}</span>
        </div>
      </div>
      <div class="info">
        <div class="info_top">
          <div class="top_left">
            <span class="iconfont icon-ziliao"></span>
            <span class="txt">Seller information</span>
          </div>
        </div>
        <div class="info_content">
          <div class="content_left">
            <p>
              <span class="title">Real name:</span>
              <span class="content">{{name}}</span>
            </p>
            <p>
              <span class="title">Turnover:</span>
              <span class="content">{{num}} CNY</span>
            </p>
          </div>
          <div class="content_right">
            <p>
              <span class="title">Contact:</span>
              <span class="content">{{phone}}</span>
            </p>
            <p>
              <span class="title">Honesty value:</span>
              <span class="content level_num">{{level}}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="comfire_txt">
        <p>
          Please be in
          <span class="time">{{count}}</span>
          Payment within minutes
        </p>
        <p>Cancellation will be cancelled after timeout</p>
      </div>
      <ul class="pay_info">
        <p class="notice">
          <span class="notice_left">When you pay, please fill in the order number in the remarks</span>
          <router-link tag="span" to="help" class="look">view help</router-link>
        </p>
        <li class="copy">
          <span>Order number</span>
          <div class="number">
            <span>{{link}}</span>
            <div class="btn_copy" :data-clipboard-text="link" @click="copy">copy</div>
          </div>
        </li>
        <li>
          <span class="pay_left">{{way}}</span>
          <span class="pay_right">{{typeContent}}</span>
        </li>
        <li>
          <span class="info_left">Transaction voucher</span>
          <div class="upload_box">
            <span>{{imgUrl}}</span>
            <input type="file" id="sonvoucher" name="voucher" accept="image/*" @change="selectBuyImg">
            <label for="sonvoucher" class="upload">{{imgUrl ? 'Uploaded' : 'upload'}}</label>
          </div>
        </li>
      </ul>
      <div class="btn_wrap">
        <div class="public_btn" @click="submitVou">Presentation of transaction voucher</div>
      </div>
    </div>
  </div>
</template>

<script>
import Clipboard from 'clipboard';
export default {
  name: 'orderConfirmed',
  data () {
    return {
      id: this.$route.query.id || 0,
      type: this.$route.query.type || 0,
      amount: '',
      nick: '',
      img: '',
      name: '',
      num: '',
      phone: '',
      level: '',
      link: '',
      way: '',
      typeContent: '',
      count: '', // Count down
      countTime: '',
      file: '',
      imgUrl: '',
      fileUrl: ''
    };
  },
  methods: {
    // Count down
    counTime () {
      this.timer = setInterval(() => {
        if (this.countTime > 0) {
          this.countTime--;
          let h = parseInt(this.countTime / 60 / 60 % 24);
          if (h < 10) h = '0' + h;
          let m = parseInt(this.countTime / 60 % 60);
          if (m < 10) m = '0' + m;
          let s = parseInt(this.countTime % 60);
          if (s < 10) s = '0' + s;
          this.count = h + ':' + m + ':' + s;
        } else {
          this.count = '00' + ':' + '00' + ':' + '00';
          clearInterval(this.timer);
          this.Toast('Order timeout has expired.');
          this.$router.replace('/myOrder/buyOrder?navIndex=4');
        }
      }, 1000);
    },
    // copy
    copy () {
      this.Toast(['Order number has been copied.', 'If not copied successfully,Please manually copy long press.']);
    },
    // upload
    selectBuyImg (e) {
      this.file = e.target.files[0];
      if (this.file.size >= 3145728) {
        this.Toast('Upload pictures too large');
        this.file = '';
        return false;
      } else {
        this.imgUrl = this.file.name;
      }
    },
    // Presentation of transaction voucher
    submitVou () {
      if (this.imgUrl) {
        this.getImgUrl();
      } else {
        this.Toast('Please upload trade voucher.');
      }
    },
    // Detail interface
    getDetail () {
      this.axios.post('index/transabuy/buy_wei_xiang', {
        ids: this.id
      }).then(({data}) => {
        if (data.status === 200) {
          this.amount = data.data.point;
          this.nick = data.data.username;
          this.img = data.data.buy_avatar;
          this.name = data.data.buy_username;
          this.phone = data.data.mobile;
          this.level = data.data.praise;
          this.link = data.data.address;
          this.num = data.data.completion_point;
          this.countTime = data.data.time;
          this.counTime(); // Count down
          if (data.data.coin_type === 1) {
            this.way = 'Alipay';
            this.typeContent = data.data.zhifu;
          } else if (data.data.coin_type === 2) {
            this.way = 'WeChat';
            this.typeContent = data.data.zhifu;
          } else {
            this.way = data.data.zhifu.bank_name;
            this.typeContent = data.data.zhifu.bank_title + `  ` + data.data.zhifu.bank_number;
          }
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Obtaining voucherURL
    getImgUrl: function () {
      let fm = new window.FormData();
      fm.append('address', this.file);
      this.axios.post('index/auth/pic_trunsfer', fm, {headers: {'Content-Type': 'multipart/form-data'}, transformRequest: [function (data) { return data; }]})
        .then(({data}) => {
          if (data.status === 200) {
            this.fileUrl = data.address;
            this.uploadVoucher();
          } else {
            this.Toast(data.message);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // Upload transaction credential interface
    uploadVoucher () {
      this.axios.post('index/present/presenthall/voucher', {
        address: this.fileUrl,
        ids: this.id
      }).then(({data}) => {
        if (data.status === 200) {
          this.Toast('I am jumping to my order....');
          setTimeout(() => {
            this.$router.push({path: 'myOrder/buyOrder?navIndex=1'});
          }, 800);
        } else {
          this.Toast(data.message);
        }
      });
    }
  },
  mounted () {
    this.copyBtn = new Clipboard('.btn_copy');
    this.getDetail();
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/public.scss';
  .orderConfirmed_wrap{
    height: 100%;
    padding-top: 90px;
    background: #f4f5f7;
    .scroll_wrap {
      height: 100%;
      overflow-y: auto;
      .total_box {
        height: 203px;
        background: url('./../image/pic2_02.png') no-repeat;
        background-size: cover;
        padding: 0 45px;
        color: #fff;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        .to_left {
          text-align: left;
        }
        .to_right {
          text-align: center;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 42px 0;
          span {
            color: #222222;
          }
          .img_box {
            width: 100%;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              width: 70px;
              height: 70px;
              display: block;
              border-radius: 50%;
              border: 2px solid #fff;
            }
          }
        }
        h4 {
          font-size: 48px;
          padding-top: 52px;
          font-weight: 500;
        }
        span {
          font-size: 24px;
          padding-left: 5px;
        }
      }
      .info {
        background: #fff;
        .info_top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 87px;
          border-bottom: 1Px solid #e6e6e6;
          padding-left: 30px;
          .iconfont {
            padding-right: 10px;
            color: #5c7af3;
          }
          .txt {
            font-size: 26px;
            color: #666666;
          }
        }
        .info_content {
          height: 190px;
          padding: 0 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          p {
            line-height: 65px;
            .title {
              font-size: 26px;
              color: #999999;
            }
            .content {
              font-size: 26px;
              color: #222222;
              &.level_num {
                font-size: 28px;
              }
            }
          }
        }
      }
      .comfire_txt {
        font-size: 28px;
        color: #666666;
        text-align: center;
        padding: 15px 0;
        p {
          line-height: 48px;
        }
        span {
          font-style: 28px;
          color: #fb555b;
          font-weight: bold;
        }
      }
      .pay_info {
        padding: 0 30px;
        background: #fff;
        .notice {
          height: 88px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 28px;
          border-bottom: 1Px solid #e5e5e5;
          .notice_left {
            color: #807cb3;
          }
          .look {
            color: #ffa521;
            font-size: 26px;
          }
        }
        li {
          height: 106px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1Px solid #e5e5e5;
          .pay_left {
            font-size: 28px;
            color: #282828;
          }
          .pay_right {
            font-size: 28px;
            color: #282828;
          }
          &:last-child {
            border-bottom: none;
          }
          .info_left {
            font-size: 28px;
            color: #282828;
          }
          .upload_box {
            width: 80%;
            height: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            position: relative;
            overflow: hidden;
            span {
              position: absolute;
              display: block;
              width: 70%;
              height: 106px;
              top: 0;
              left: 0;
              overflow-x: auto;
              white-space: nowrap;
              line-height: 106px;
            }
            input#sonvoucher{
              position: fixed;
              // top: -10000px;
              // left: 10000px;
              opacity: 0;
              z-index: -1;
              width: 140px;
              height: 56px;
            }
            .upload {
              display: block;
              width: 140px;
              height: 56px;
              line-height: 56px;
              text-align: center;
              color: #ff9e27;
              border: 1Px solid #ff9e27;
              border-radius: 10px;
              font-size: 26px;
            }
          }
        }
        .copy {
          height: 106px;
          line-height: 106px;
          font-size: 28px;
          color: #282828;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1Px solid #e5e5e5;
          .number {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            span {
              padding-right: 30px;
            }
            .btn_copy {
              width: 140px;
              height: 56px;
              line-height: 56px;
              text-align: center;
              color: #ff9e27;
              border: 1Px solid #ff9e27;
              border-radius: 10px;
              font-size: 26px;
            }
          }
        }
      }
      .btn_wrap {
        text-align: center;
        padding: 0 74px;
        margin-top: 60px;
        margin-bottom: 90px;
        .public_btn {
          width: 100%;
          box-shadow: 0px 0px 10px 10px #f6ebd2;
        }
      }
    }
  }
</style>
